<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list
        :list="tablist"
        :returnButton="true"
        backUrl="/user/certification"
      ></user-tab-list>
      <div style="position: relative">
        <div class="filter-line flx-row-s-c">
          <span class="item-name">姓名</span>
          <Input
            v-model.trim="name"
            placeholder=""
            maxlength="30"
            style="width: 120px"
          />
          <div
            class="user-strong-button line-button-size"
            style="margin: 0 10px 0 30px"
            @click="getList"
          >
            搜索
          </div>
          <div
            class="user-normal-button line-button-size"
            @click="showCertificationModal"
          >
            添加个人认证
          </div>
        </div>
      </div>
    </div>

    <div class="user-main-box pub-m-t-20">
      <div style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="filter-line search-result-line flx-row-bw-c">
          <span class="c-g f-14"
            >搜索结果共<span class="c-black">
              {{ total != null ? ` ${total} ` : "" }} </span
            >条</span
          >
        </div>
        <table class="table-area">
          <thead>
            <tr>
              <th><div class="line-style" style="justify-content: center;min-width: 48px">序号</div></th>
              <th><div class="line-style">姓名</div></th>
              <th><div class="line-style">证件类型</div></th>
              <th><div class="line-style">证件号码</div></th>
              <th><div class="line-style">提交时间</div></th>
              <th><div class="line-style">状态</div></th>
              <th><div class="line-style">操作</div></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list" :key="index">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f">{{
                    (page - 1) * pageSize + index + 1
                  }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f f-ell-sin">{{ item.name }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f f-ell-sin">{{
                    item.type | typeFilter
                  }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.number }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.createdTime }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{
                    item.status == 0
                      ? "认证中"
                      : item.status == 1
                      ? "认证成功"
                      : item.status == 2
                      ? "认证失败"
                      : ""
                  }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <div class="normal-f" v-if="item.isFirst == 1">-</div>
                  <div
                    class="form-font-button"
                    v-else-if="item.isFirst == 0"
                    @click="deleteItem(item.id)"
                  >
                    删除
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <Empty-State
          v-if="total != null && total == 0"
          content="未搜索到任何内容！"
        ></Empty-State>
        <div class="form-page-bottom-area flx-row-c-c">
          <Page
            :total="total"
            :current="page"
            :page-size="pageSize"
            :page-size-opts="pageSizeOpts"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
            show-total
          />
        </div>
      </div>
    </div>
    <certification-modal
      :show.sync="certificationModalShow"
      :colorType="colorType"
      @submit-success="getList"
    ></certification-modal>
  </div>
</template>

<script>
import { getBottom } from "@/api/data";
import { getUserCertificatesList, deleteUserCertificates } from "@/api/user";
export default {
  name: "VipPersonalC",
  components: {
    certificationModal: () =>
      import("_c/modal/userModal/certificationModal/certificationModal.vue"),
  },
  filters: {
    typeFilter(val) {
      let title = "--";
      switch (val) {
        case 0:
          title = "身份证";
          break;
        case 1:
          title = "护照";
          break;
        case 2:
          title = "军官证";
          break;
        case 3:
          title = "港澳居民来往内地通行证";
          break;
        case 4:
          title = "港澳居民居住证";
          break;
        case 5:
          title = "台湾居民来往大陆通行证";
          break;
        case 6:
          title = "台湾居民居住证";
          break;
        case 7:
          title = "外国人永久居留身份证";
          break;
      }
      return title;
    },
  },
  data() {
    return {
      loading: false,
      breadCrumb: [
        {name: "管理中心"},
        { name: "账户管理" },
        { name: "我的认证" },
        { name: "个人认证" },
      ],
      tablist: [
        {
          name: "个人认证",
          to: "/user/personalc",
        },
      ],
      name: "",
      // 分页设置
      total: null,
      pageSizeOpts: [10, 20, 50, 100, 200],
      pageSize: 10,
      page: 1,
      list: [],
      // modal
      certificationModalShow: false,
      colorType: 0,
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    if (this.$storage.getColorType()) {
      this.colorType = this.$storage.getColorType();
    } else {
      this.getBottom();
    }
  },
  methods: {
    async getBottom() {
      const { code, data } = await getBottom();
      if (code === 200) {
        this.colorType = data.colorType;
      }
    },
    // 获取列表
    async getList() {
      this.loading = true;
      let data = {
        name: this.name,
        limit: this.pageSize,
        page: this.page,
      };
      let res = await getUserCertificatesList(data);
      if (res.code == 200) {
        if (
          this.page > 1 &&
          res.data.total <= (this.page - 1) * this.pageSize
        ) {
          this.page =
            res.data.total == 0 ? 1 : Math.ceil(res.data.total / this.pageSize);
          this.getList();
          return;
        }
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getList();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 删除
    deleteItem(id) {
      this.$Modal.confirm({
        title: "删除确认",
        content: "<p>确定要删除此个人认证吗？</p>",
        onOk: async () => {
          let res = await deleteUserCertificates(id);
          if (res.code == 200) {
            this.$Message.success("删除成功！");
            this.getList();
          }
        },
      });
    },
    // 点击按钮
    showCertificationModal() {
      this.certificationModalShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
